<template>
  <div class="form-container">

    <el-input v-model="inputData" class="container" :prefix-icon="Search"
      style="width: 100%; height: 25px;margin-bottom: 7px;" placeholder="请输入部门名称" />
    <el-tree class="tree" :data="data" :default-expand-all="true" />
  </div>
</template>
<script lang="ts" setup>
import { Calendar, Search } from "@element-plus/icons-vue";
let inputData: string;
const data = [
  {
    label: "新能源",
    children: [
      {
        label: "计量化验部",
        children: [
          { label: "焦油针状焦化验室" },
          { label: "石墨电极化验室" },
          { label: "焦油及针状焦化验室" },
        ],
      },
      {
        label: "煤焦油分厂",
        children: [
          { label: "焦油萘蒸馏单元" },
          { label: "焦油萘蒸馏一部" },
          { label: "蒸馏一段" },
          { label: "蒸馏二段" },
          { label: "焦油萘蒸馏二部" },
          { label: "焦油改质沥青单元" },
          { label: "萘精制单元" },
          { label: "焦油油库单元" },
          { label: "焦油辅助生产单元" },
          { label: "焦油维修车间" },
          { label: "焦油管理人员" },
        ],
      },
      {
        label: "石墨电极分厂",
        children: [
          {
            label: "烧结工艺",
            children: [
              { label: "焙烧车间" },
              { label: "一焙车间" },
              { label: "二焙车间" },
              { label: "压型车间" },
              { label: "浸渍车间" },
              { label: "二烧车间" },
            ],
          },
          {
            label: "石墨化工艺",
            children: [
              { label: "石墨化车间" },
              { label: "串接石墨化车间" },
              { label: "艾奇逊石墨化车间" },
            ],
          },
          { label: "设备采购部" },
          { label: "生产技术部" },
          { label: "财务部" },
          { label: "监察审计部" },
          { label: "物资总库" },
          { label: "管理部" },
          { label: "行政科" },
          { label: "食堂" },
          { label: "企管科" },
          { label: "人力资源科" },
          { label: "项目筹建部" },
          { label: "销售部" },
          { label: "预算部" },
          { label: "保卫部" },
          { label: "设备部" },
          { label: "安环部" },
          { label: "质检部" },
          { label: "土建工程部" },
          { label: "设备安装部" },
          { label: "负极材料厂" },
          { label: "负极研发部" },
          { label: "负极材料中试线一车间" },
          { label: "信息科" },
          { label: "原料采购部" },
          { label: "品管科" },
          { label: "能源管理部" },
          { label: "安全部" },
          { label: "环保部" },
          { label: "新材料项目筹建部" },
          { label: "负极研发" },
          { label: "正极研发" },
          { label: "研发一部" },
          { label: "一部测试组" },
          { label: "研发二部" },
          { label: "负极项目磅房" },
          { label: "新材料研究院" },
          { label: "外联部" },
          {
            label: "负极材料石墨化厂",
            children: [
              { label: "负极材料石墨化厂一车间" },
              { label: "负极材料石墨化厂二车间" },
              { label: "负极材料石墨化厂三车间" },
              { label: "负极材料石墨化厂四车间" },
            ],
          },
          { label: "预碳化车间" },
          { label: "司机部" },
          { label: "挂车组" },
          { label: "货车组" },
          { label: "洗煤车间" },
          {
            label: "新材料厂",
            children: [
              { label: "201A车间" },
              { label: "201B车间" },
              { label: "202车间" },
              { label: "203车间" },
              { label: "204车间" },
              { label: "205车间" },
              { label: "206车间" },
              { label: "207车间" },
              { label: "208车间" },
            ],
          },
          // 其他部门的数据同样结构...
        ],
      },
    ],
  },
];
</script>
<style>
.form-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  /* Main部分占据剩余空间 */
  overflow: auto;
  /* 如果内容超出Main部分高度，则显示滚动条 */
}


.tree {
  width: 100%;
  /* 设置树状结构宽度为100% */
}
</style>
